<template>
<div class="section" :style="{'height':offsetheight+'px'}">
<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">


	<img src="https://img.hidlq.com/image/cuanyue/a3-s-1.jpg" 
	:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >

	<!-- <div class="a2 title mb20"
	:style="{'top' : 30 + 'px', 'left' : offsetwidth * 0.5 - 300 + 'px'}"
	>{{info.title}}</div> -->

	<div class="a2" style='width:600px;overflow:auto;'
	:style="{'top' : 30 + 'px', 'left' : offsetwidth * 0.5 - 300 + 'px', 'height' : offsetheight - 50 + 'px'}"
	>
		<div class="title mb20"
		>{{info.title}}</div>

		<div v-for="item in info.content" >
			<div class="content mt20" v-if="item.type == 'text'">
				{{item.value}}
			</div>

			<div class="mt20 text-center" v-if="item.type == 'image'">

				<img :src="item.value" width="400">
			</div>
		</div>
	</div>
	
</div>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import { qiyezixun, shichanghuodong } from './data'

export default {
	
	name : 'cuanyuexinwenzixun',
	
	data () {
		return {
		  	what : this.$route.query.what,
		  	id : this.$route.query.id,

		  	offsetheight : document.documentElement.clientHeight - 60,    //获取当前页面的高度
			offsetwidth : document.documentElement.clientWidth,    //获取当前页面的高度

			imgWidth : 1400,
			imgHeight : 500,

			qiyezixundata : qiyezixun,
			shichanghuodongdata : shichanghuodong,
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),

		bili () {
			return this.offsetheight / this.imgHeight;
		},

		offsetX () {
			return (this.imgWidth * this.bili - this.offsetwidth) * 0.5;
		},

		info () {
			let data = [];
			if(this.$route.query.what == 'qiyezixun'){
				data = qiyezixun;
			}else if(this.$route.query.what == 'shichanghuodong'){
				data = shichanghuodong;
			}

			for(let i = 0; i < data.length; i++){
				let tmp = data[i];
				if(tmp.id == this.$route.query.id){
					return tmp;
				}
			}
			return {};
		},
	},

	methods : {
		// info (item) {
		// 	console.log(item);
		// }
	},

	watch : {
	    // $route(){
     //    	this.what = this.$route.query.what;
     //    	this.id = this.$route.query.what;
     //  	},
	},

	mounted () {
		window.onmousewheel = document.onmousewheel = function(e){return true;}
	},

}
</script>

<style scoped>
.section{
	overflow: hidden;
}
.a {
	position: relative;
}
.a1 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

.a2 {
	position: absolute;
	/*animation-delay: 1s;
	animation-duration: 1s;*/
	color: #fff;
	width: 500px;
}

.title {
	width: 600px;
	font-size: 36px;
	color: #fff;
}

.content {
	width: 600px;
	font-size: 18px;
	color: #fff;
	text-indent:2em;
}
</style>
